<template>
    <div class="Seedeptal">
        <div class="see-search">
          <label class="font-search" for="">请输入关键字查询：</label>
          <input class="see-input" type="text">
        </div>
        <div class="see-tal-int">
          <table class="table table-bordered table-hover table-striped">
            <thead>
              <tr>
                 <th>部门ID</th>
                 <th>部门名称</th>
                 <th>部门负责人</th>
                 <th>负责人电话</th>
                 <th>操作</th>
              </tr>
             </thead>
             <tbody>
          <tr v-for="item in depints">
            <td>{{item.dId}}</td>
            <td>{{item.dName}}</td>
            <td>{{item.dDirector}}</td>
            <td>{{item.dDirectorTel}}</td>
            <td>
              <a href="#" @click.prevent="removeCar(item.dId)">删除</a>
            </td>
          </tr>
             </tbody>
          </table>
        </div>
        <div class="Seepage">
          <ul>
            <li @click="home">首页</li>
            <li @click="prev">上一页</li>
            <li v-for="item of pages" class="item" :class="{active: current === item}" @click="active(item)">
                {{item}}
            </li>
            <li @click="next">下一页</li>
            <li @click="trailer">尾页</li>
            <li>共 {{pages}} 页</li>
            <li class="last">跳转 <input type="text" v-model="much"> 页</li>
        </ul>
        <button @click="goPage">确定</button>
        </div>
    </div>
    
</template>

<script>
import Axios from 'axios'
export default {
     name:'Seedeptal',
      data(){
        return{
          dId:"",
          depints:[],
          current: 1,
          much: '',
          flag: true,
          pages:''
        }
      },
      created (){
        console.log(this.current)
        var url='/department?page='+this.current
        Axios.get(url).then(response =>{
          console.log(response)
            this.depints=response.data.data
            this.pages=response.data.last_page
            console.log(this.depints)
        })

      },
      methods: {
                removeCar(dId){
                 //  Axios.get('/department').then(response =>{
                 //  this.depints=response.data
                 //  var cIndex =this.depints.findIndex((item,index)=>{
                 //      if (item.dId ==dId) {
                 //        return true;//终止查找索引的过程并返回当前索引号
                 //      }
                 //     });
                 //  this.depints.splice(cIndex,1);
                 // })
                 console.log(dId)
                },
                active (item) {
                    this.current = item;
                 this._getData()
                },
                prev (){
                    this.current > 1 && this.current--;
                 this._getData()
                },
                next () {
                    this.current < this.pages && this.current++;
                        this._getData()
                },
                home () {
                    this.current = 1;
                     this._getData()
                },
                trailer () {
                    this.current = this.pages;
                 this._getData()
                },
                goPage () {
                    let num =  parseInt(this.much);
                    if (num >= 1 && num <= this.pages) {
                        this.current = num;
                         this._getData()
                    } else if (num > this.pages) {
                        this.current = this.page;
                         this._getData()
                    } else {
                        this.current = 1;
                       this._getData()
                    }
                },
                _getData () {
                     var url='/department?page='+this.current
                 Axios.get(url).then(response =>{
                console.log(response)
                 this.depints=response.data.data
                 this.pages=response.data.last_page
                 console.log(this.depints)
                 })
                }
            },
            // computed: {
            //     pages () {
            //         let left = 1
            //         let right = this.count
            //         let arr = []
            //         if (this.count >= 5) {
            //             if (this.current > 3 && this.current <= this.count - 2){
            //                 left = this.current - 2
            //                 right = this.current + 2
            //             } else {
            //                 if (this.current <= 3){
            //                     left = 1
            //                     right = 5
            //                 } else {
            //                     right = this.count
            //                     left = this.count - 4
            //                 }
            //             }
            //         }
            //         while (left <= right) {
            //             arr.push(left)
            //             left++
            //         }
            //         return arr
            //     },
            // },
            watch: {
                current () {
                    this._getData();
                },
                content () {
                    this.content.forEach(item => {
                        if (item.key === this.current) {
                            this.pageContent =  item.data
                        }
                    })
                }
            },
     components: {

        }


}
</script>
<style >
.Seedeptal{
   margin: 0 auto;
  padding-top: 20px;
    width: 80%;
    background-color: #fff;
}
.see-tal-int{
   margin: 0 auto;
  padding-top: 20px;
    width: 80%;
    background-color: #fff;
    padding-bottom: 30px;
}
.see-tal-int tr {
  height: .6rem;
  border: 1px solid #666;
}
.see-tal-int td{
  border-right: 1px solid #666;
}
.see-input{
  border: 1px solid #666;
  width: 4rem;
}
.font-search{
  margin-left: -34px;
}
.see-search{
  width: 500px;
  margin-left: 10rem;
}
.table-bordered {
    border: 1px solid #ddd;
}
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
}
/*分页*/
        .Seepage{
          width: 15rem;
          margin: 0 auto;
        }
        li{
            list-style: none;
            float: left;
            border: 1px solid #09c;
            width: 1rem;
            height: 40px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .item{
            width: 40px;
        }
        .active{
            color: red;
        }
        input{
            width: 30px;
        }
        .last{
            width: 120px;
        }
        button {
            margin-left: 20px;
            width: 50px;
            height: 40px;
        }

</style>